<template>

  <div class="pages">
     <h1>门店开通会员小程序流程指导</h1>
     <h3>第一步、门店微信公众号关联会员小程序</h3>
    <div>
      <h4>详细步骤</h4>
      <h6>1.登录门店微信公众号，来到公众号首页。</h6>
      <h6>2.在公众号首页左侧菜单栏，点击“小程序管理”。</h6>
      <div class="image-box one-img"></div>
      <h6>
        3.点击 关联小程序（验证公众号管理人身份：注意：这里是需要公众号管理人，也就是申请人的绑定的微信扫码，运营人没有权限）
        输入小程序ID <span class="link-tip">（wx5046bf9a997c1f44）</span>，验证后即可绑定“旦宝e家”小程序到公众号了！
      </h6>
      <div class="image-box two-img"></div>
    </div>
    <h3>第二步、获取本门店小程序链接</h3>
    <div class="image-box">
      <el-input v-model="path" disabled style="width:500px"></el-input>
      <el-button type="primary" size="small" @click="onCopyPath">复制链接</el-button>
      <span class="link-tip">* 请复制专属于本门店的会员小程序链接</span>
    </div>
    <h3>第三步、将所复制的链接填入公众号菜单</h3>
    <div class="image-box">
        <h4>详细步骤</h4>
      <h6>
        1.在首页左侧的功能选项中选择自定义菜单，
      </h6>
      <div class="image-box three-img"></div>
      <h6>
        2.打开自定义菜单之后，你可以在这里设置【会员中心】母菜单，然后选择一个子菜单。
      </h6>
      <div class="image-box four-img"></div>
      <h6>
       3、选择好了一个子菜单之后，你会看到右边除了菜单名称设置，还有菜单内容设置，选择跳转小程序。
      </h6>
      <div class="image-box five-img"></div>
      <h6>
        4、选择了跳转小程序后点击选择小程序，选择公众号已经绑定的“旦宝e家”小程序。
      </h6>
      <div class="image-box six-img"></div>
      <h6>
       5、选择了小程序后你可以看到小程序路径，<span class="link-tip tip-size">将获取到的小程序链接填入小程序路径处。</span>
      </h6>
      <div class="image-box seven-img"></div>
      <h6>
       6、然后填写备用网页（备用网页是在用户使用旧版微信不支持小程序时将会打开备用网页，可从您自己的公众号内容中选取)
      </h6>
      <div class="image-box eight-img"></div>
    </div>
    <h3>第四步、全部填写完成后，保存发布。完成开通</h3>
     <div class="image-box success-img"></div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import state from "@/util/state";
import { getGoodsPosListByPage } from "@/api";
export default {
  computed: mapState(["sub", "power", "merchantId"]),
  data() {
    return {
      path: 'pages/index/index?shopId='
    };
  },
  mounted() {
    this.path = this.path + this.merchantId
  },
  methods: {
    onCopyPath(){
      //  var Url2 = document.getElementById("inviteCode").innerText;
      var oInput = document.createElement("input");
      oInput.value = this.path;
      document.body.appendChild(oInput);
      oInput.select(); // 选择对象
      document.execCommand("Copy"); // 执行浏览器复制命令
      oInput.className = "oInput";
      oInput.style.display = "none";
      this.$message.success("复制成功");
    }
  }
};
</script>
<style  scoped>
.pages {
  padding: 20px;
}
h1 {
  padding: 10px 0;
  color: rgb(2,162,240);
}
h3 {
  padding: 26px 0 15px 0;
}
h4 {
  font-weight: 500;
  color: rgb(2,162,240);
  font-size: 14px;

}
h6 {
  font-size: 14px;
  padding: 10px;
  font-weight: unset;
  color: #666;
}
.image-box {
  margin-left: 24px;
}
.one-img {
  width: 246px;
  height: 188px;
  background-image: url("../../../assets/images/one.png");
}
.two-img {
  width: 815px;
  height: 555px;
  background-image: url("../../../assets/images/two.png");
}
.three-img {
  width: 815px;
  height: 380px;
  background: url("../../../assets/images/six.png") no-repeat;
}
.four-img {
  width: 815px;
  height: 295px;
  background: url("../../../assets/images/userCenter.png") no-repeat;
}
.five-img {
  width: 815px;
  height: 420px;
  background: url("../../../assets/images/four.png") no-repeat;
}
.six-img {
  width: 815px;
  height: 415px;
  background: url("../../../assets/images/five.png") no-repeat;
}
.seven-img {
  width: 815px;
  height: 200px;
  background: url("../../../assets/images/path.png") no-repeat;
}
.eight-img {
  width: 815px;
  height: 313px;
  background: url("../../../assets/images/u125.png") no-repeat;
}
.success-img {
  width: 815px;
  height: 380px;
  background: url("../../../assets/images/success.png") no-repeat;
}
.link-tip {
  font-size: 12px;
  color: #fb4044;
}
.tip-size {
  font-size: 14px;
}
</style>
